<template>
	<view class="content">
		<!-- 此处为了让reload时不自动滚动到顶部，需要设置auto-clean-list-when-reload和auto-scroll-to-top-when-reload为false，即在reload时关闭自动清空数组和自动滚动到顶部 -->
		<!--工单基本信息-->
		<woCard :item="khInfo" :isSelect="true"></woCard>
		<!--tab页签-->
		<view class="uTabsView">
				<u-subsection :list="tabList" fontSize="16"  :current="tabIndex" @change="tabChange"></u-subsection>
		</view>
		<!-- 自定义下拉刷新view -->
		<!-- <custom-refresher slot="refresher" :status="refresherStatus"></custom-refresher> -->
		<!-- list数据，建议像下方这样在item外层套一个view，而非直接for循环item，因为slot插入有数量限制 -->
		<view class="contentView">
			<!--生产进度详细信息-->
			<view v-if="tabIndex == 0">
				<view v-for="(item, index) in listDevice" :key="index">
					<view class="card">
						<view class="topRow1">
							<view class="name">
								<text>设备名称：{{item.DeviceName || '暂无'}}</text>
							</view>
							<view>
								<text class="colorGray">设备编码：</text>
								<text class="colorGray">{{item.DeviceCode}}</text>
							</view>
							<view>
								<text class="colorGray">规格类型：</text>
								<text class="colorGray">{{item.ModelType}}</text>
							</view>
							<view>
								<text class="colorGray">品牌：</text>
								<text class="colorGray">{{item.DeviceBrand}}</text>
							</view>
							<view>
								<text class="colorGray">备注：</text>
								<text class="colorGray">{{item.Remark}}</text>
							</view>
						</view>
						<view class="bottomRow">
							<view class="lxRow">
							</view>
							<view class="lxRow">
								<u-button v-if="isclose" size="mini" type="primary" ripple-bg-color="#909399"
									:plain="true" @click="createPaper(item)">创建维修单
								</u-button>
							</view>
						</view>
					</view>
			</view>
				</view>
			<!--点检项目-->
			<view v-if="tabIndex == 1">
				<view v-for="(item, index) in spotItemList" :key="index">
					<view class="card">
						<view class="topRow1">
							<view class="name">
								<text>项目名称：{{item.SpotMaintenanceName || '暂无'}}</text>
							</view>
							<view>
								<text class="colorGray">项目编码：</text>
								<text class="colorGray">{{item.ItemContent}}</text>
							</view>
							<view>
								<text class="colorGray">项目内容：</text>
								<text class="colorGray">{{item.SpotMaintenanceCode}}</text>
							</view>
							<view>
								<text class="colorGray">标准：</text>
								<text class="colorGray">{{item.ItemStandard}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="padding: 2px 15px;">
				<u--textarea v-model="woRemark" placeholder="请输入备注" ></u--textarea>
			</view>
			<view style="padding: 15px;">
				<u-button type="primary" text="完成工单"  @click="finishWorkOrder()"></u-button>
			</view>
		</view>
		<u-popup :show="show" mode="bottom" :closeOnClickOverlay="true" @close="close" :closeable="true">
			<view class="content_scroll">
				<scroll-view scroll-y="true" style="height: 700rpx;">
					<view class="flex-white-plr26 ptb10 bdb_f5">
						<text class="mr26"><text class="redXingh">*</text>维修单名称
							
						</text>
						<view>
							<u-input v-model="MaintainPaperName" placeholder="请输入维修单名称" />
						</view>
					</view>
					<view class="flex-white-plr26 ptb10 bdb_f5">
						<text class="mr26">维修单编号</text>
						<view>
							<u-input v-model="MaintainPaperCode" placeholder="请输入,忽略则自动生成" />
						</view>
					</view>
					<view class="flex-white-plr26 ptb10 bdb_f5">
						<text class="mr26"><text class="redXingh">*</text>设备名称
							
						</text>
						<view>
							<u-input v-model="DeviceName" :disabled="true" placeholder="请输入设备名称" />
						</view>
					</view>
					<view class="flex-white-plr26 ptb10 bdb_f5">
						<text class="mr26"><text class="redXingh">*</text>设备编码
							
						</text>
						<view>
							<u-input v-model="DeviceCode" :disabled="true" placeholder="请输入设备编码" />
						</view>
					</view>
					<view class="flex-white-plr26 ptb20 bdb_f5" @click="DateShow = true, gjDateType = 'ReportDate'">
						<text class="mr26">报修时间</text>
						<view class="w420">{{$u.timeFormat(ReportDate, 'yyyy-mm-dd')}}</view>
						<u-icon class="ml26" name="calendar" size="30" color="#888888"></u-icon>
					</view>
					<view class="flex-white-plr26 ptb10 bdb_f5">
						<text class="mr26">品牌
						</text>
						<view>
							<u-input v-model="DeviceBrand" :disabled="true" placeholder="请输入品牌" />
						</view>
					</view>
					<view class="flex-white-plr26 ptb10 bdb_f5">
						<text class="mr26">备注
						</text>
						<view>
							<u-input v-model="Remark" placeholder="请输入备注" />
						</view>
					</view>
				</scroll-view>
				<view class="confrim-btn">
					<u-row gutter="16">
						<u-col span="5">
							<u-button ripple-bg-color="#11AAED" :plain="true" @click="show = false">取消</u-button>
						</u-col>
						<u-col span="2">
						</u-col>
						<u-col span="5">
							<u-button ripple-bg-color="#11AAED" :plain="true" @click="submitPaper()">确定</u-button>
						</u-col>
					</u-row>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker :params="pickerTimeParams" :safe-area-inset-bottom="true" end-year="2100" :show="DateShow"
			@confirm="pickerTimeConfirmFun"   v-model="defaulTime" :default-time="defaulTime" mode="date"></u-datetime-picker>
	</view>
</template>

<script>
	let that = '';
	import woCard from '@/components/card/deviceworkorder.vue'
	import {
		formateDate
	} from '../../../util/date.js'
	import {
		getNowDate
	} from '../../../static/utils/date.js'
	export default {
		components: {
			woCard
		},
		data() {
			return {
				spotItemList:[],  //点检保养项目
				show: false,
				DateShow: false,
				defaulTime: Number(new Date()),
				pickerTimeParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					timestamp: false
				},
				isclose: true,
				listDevice: [],
				DeviceName: "", //设备名称
				DeviceCode: "", //设备编码
				DeviceBrand: "", //品牌
				MaintainPaperName: "",//维修单名称
				MaintainPaperCode: "", //维修单编码
				Remark: "", //备注
				woRemark: "", //工单完工备注
				ReportDate: "",
				khInfo: {},
				tabList:['设备清单', '点检保养项目'],
				tabIndex: 0,
				refresherStatus: 0,
				cardIndex: -1,
				isLoadSelectKhById: false
			}
		},
		onLoad(e) {
			that = this;
			let dateObj = getNowDate(true);
			that.ReportDate = dateObj.st;
			that.cardIndex = e.index || -1;
			that.khInfo = uni.$khInfo || {};
			uni.setNavigationBarTitle({
				title: that.khInfo.clientName || '工单 详情'
			})
			this.selectProcessByWo();
		},
		onBackPress(e) {
			if (e.from == 'backbutton' && this.cardIndex != -1) {
				uni.$emit('updateListByIndex', {
					index: this.cardIndex,
					obj: this.khInfo
				})
			}
		},
		onShow() {

		},
		//注意函数和data同级,不要写在methods内
		onNavigationBarButtonTap(e) {
			uni.switchTab({
				url: '../../index/imes'
			});
		},
		methods: {
			submitPaper() {
				let mainData = {
					DeviceBrand: that.DeviceBrand,
					DeviceCode: that.DeviceCode,
					DeviceName: that.DeviceName,
					MaintainPaperCode: that.MaintainPaperCode,
					MaintainPaperName: that.MaintainPaperName,
					Remark: that.Remark,
					ReportDate: that.$u.timeFormat(that.ReportDate, 'yyyy-mm-dd')
				}
				let params = {
					delKeys: null,
					detailData: null,
					mainData: mainData
				};
				this.http.post("api/Equip_MaintainPaper/Add", params, true).then(result => {
					if (result.status) {
						that.show = false;
						that.$u.toast(result.message);
					}
				})
			},
			//创建维修单方法
			createPaper: function(entity) {
				this.DeviceCode = entity.DeviceCode;
				this.DeviceName = entity.DeviceName;
				this.DeviceBrand = entity.DeviceBrand;
				this.show = true;
			},
			//工单完工
			finishWorkOrder:function() {
				let that = this;
				this.http.get("api/Equip_SpotMaintWorkOrder/changeUpdate?spotMaintWorkOrderId=" + this.khInfo.SpotMaintWorkOrderId +
					"&status=2" + "&remark=" + that.woRemark, {}, true).then(result => {
					that.$u.toast("变更成功！");
					that.khInfo.Status = 2;
					uni.navigateTo({
						url: './workorder'
					})
				})	
			},
			//根据计划主键获取设备信息
			selectProcessByWo: function() {
				let params = {
					order: "desc",
					page: 1,
					rows: 1000,
					sort: "CreateDate"
				};
				params.wheres = JSON.stringify([{name:'SpotMaintPlanId',value:this.khInfo.SpotMaintPlanId}]);
				this.http.post("api/Equip_SpotMaintPlan/getTable1Data", params, true).then(result => {
					this.listDevice = result.rows;
				})
			},
			//Tab页签切换方法
			tabChange(index) {
				this.tabIndex = index;
				let item = that.tabList[index];
				if (index == 1) {
					this.getProductionRecord();
				}
			},
			// 时间选择器点击确定按钮，返回当前选择的值
			pickerTimeConfirmFun: function(e) {
				if (that.gjDateType == 'ReportDate') {
					that.ReportDate = e.value;
				} 
				this.DateShow = false;
			},
			// 获取点检保养项目列表
			getProductionRecord: function() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let params = {
					order: "desc",
					page: 1,
					rows: 1000,
					sort: "CreateDate"
				};
				params.wheres = JSON.stringify([{name:'SpotMaintPlanId',value:this.khInfo.SpotMaintPlanId}]);
				this.http.post("api/Equip_SpotMaintPlan/getTable2Data", params, true).then(result => {
					this.spotItemList = result.rows;
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style>
	/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
	/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */

	/*如果有scoped，page的css设置建议放在App.vue中 */
	page {
		height: 100%;
		background-color: #F8F8F8;
	}

	.content_scroll {
		padding: 24rpx;
		text-align: center;
	}

	.content {
		height: 100%;
		/* 父节点建议开启flex布局 */
		display: flex;
		flex-direction: column;
	}

	.uTabsView {
		border-bottom: 1rpx solid #DDDDDD;
		z-index: 100;
		position: sticky;
		top: 0;
	}

	.contentView {
		/* background-color: #FFFFFF; */
		min-height: calc(100vh - 45px);
	}

	.flexRow {
		display: flex;
		font-size: 30rpx;
		margin-bottom: 8rpx;
	}

	.flexRow>view {
		width: 50%;
		display: flex;
	}

	.flexRow>view>text:first-child {
		width: 166rpx;
	}

	.item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}

	.uTabsView {
		top: -2px !important;
	}

	.width100 {
		width: 100%;
		margin: 26rpx 0;
	}

	.u-steps__item,
	.u-steps__item--row {
		width: 200px !important;
	}

	.card {
		width: 698rpx;
		padding: 26rpx 26rpx 10rpx;
		margin: 32rpx 26rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		box-shadow: #d8d8d8 0px 0px 0rpx;
		position: relative;
		background-color: #FFFFFF;
	}

	.topRow1 {
		margin-bottom: 16rpx;
		color: #000;
		position: relative;
	}

	.lxIcon {
		width: 52rpx;
		height: 52rpx;
		margin-left: 5rpx;
	}

	.name {
		font-size: 16px;
		margin-bottom: 8rpx;
		color: #000000;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: bold;
	}

	.bottomRow {
		width: 100%;
		padding-top: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid #f0f0f0;
		font-size: 15px;
		color: #007AFF;
	}

	.lxRow {
		display: flex;
		align-items: center;
		margin-right: -15rpx;
	}

	.lxRow>image {
		width: 52rpx;
		height: 52rpx;
		margin-right: 26rpx;
	}

	.bqRow {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.bqRow>text {
		font-size: 14px;
		color: #888888;
	}

	.bqRow>view {
		padding: 6rpx 16rpx;
		font-size: 14px;
		background-color: rgba(255, 85, 127, 0.1);
		color: #ff5500;
		border-radius: 10rpx;
		margin: 6rpx 26rpx 20rpx 0;
	}

	.card {
		width: 698rpx;
		padding: 26rpx 26rpx 10rpx;
		margin: 32rpx 26rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		box-shadow: #d8d8d8 0px 0px 0rpx;
		position: relative;
		background-color: #FFFFFF;
	}


	.topRow1 {
		margin-bottom: 16rpx;
		color: #000;
		position: relative;
	}

	.lxIcon {
		width: 52rpx;
		height: 52rpx;
		margin-left: 5rpx;
	}

	.name {
		font-size: 16px;
		margin-bottom: 8rpx;
		color: #000000;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: bold;
	}

	.bottomRow {
		width: 100%;
		padding-top: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid #f0f0f0;
		font-size: 15px;
		color: #007AFF;
	}

	.lxRow {
		display: flex;
		align-items: center;
		margin-right: -15rpx;
	}

	.lxRow>image {
		width: 52rpx;
		height: 52rpx;
		margin-right: 26rpx;
	}

	.bqRow {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.bqRow>text {
		font-size: 14px;
		color: #888888;
	}

	.bqRow>view {
		padding: 6rpx 16rpx;
		font-size: 14px;
		background-color: rgba(255, 85, 127, 0.1);
		color: #ff5500;
		border-radius: 10rpx;
		margin: 6rpx 26rpx 20rpx 0;
	}
</style>
